<template>
    <full-screen-dialog
        :title="titleMap[mode]"
        v-model="visible"
        :width="1200"
        destroy-on-close
        @closed="$emit('closed')"
    >
        <el-form
            :model="entityObj"
            :rules="rules"
            :disabled="mode == 'Show'"
            ref="dialogForm"
            label-width="100px"
        >
            <el-steps :active="active" align-center finish-status="success">
                <el-step :title="item" description v-for="item in stepList" :key="item.index" />
            </el-steps>
            <el-row>
                <el-col :span="8">
                    <el-form-item
                        label-width="120px"
                        label="还货订单编号:"
                    >{{entityObj.backGoodsOrderCode}}</el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item
                        label-width="120px"
                        label="采购订单编号:"
                    >{{entityObj.purchaseOrderCode}}</el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label-width="120px" label="还货单位:">
                        <el-tooltip placement="top">
                            <template #content>
                                联系人: {{entityObj.purchaseUnityRealName}}
                                <br />
                                联系电话:{{entityObj.purchaseUnityMobile}}
                                <br />
                                联系地址:{{entityObj.purchaseUnityAddress}}
                            </template>
                            <span style="color: blue;">{{entityObj.purchaseUnityName}}</span>
                        </el-tooltip>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label-width="120px" label="还货人:">{{entityObj.backGoodsName}}</el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label-width="120px" label="还货时间:">{{entityObj.backGoodsDate}}</el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label-width="120px" label="收货状态:">{{entityObj.taskStatusDesc}}</el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="24">
                    <el-form-item label-width="120px" label="还货订单:">
                        <el-table
                            :data="entityObj.backGoodsOrderItems"
                            border
                            style="width: 100%"
                            show-summary
                        >
                            <el-table-column label="物料编码" width="130" prop="materialCode"></el-table-column>
                            <el-table-column label="物料名称" width="130" prop="materialName">
                                <template #default="scope">
                                    <div
                                        v-if="scope.row.materialImages && scope.row.materialImages.length > 0"
                                        style="color: #318cf2;"
                                        @click="handlePreview(scope.row)"
                                    >{{scope.row.materialName}}</div>
                                    <div v-else>{{scope.row.materialName}}</div>
                                </template>
                            </el-table-column>
                            <el-table-column label="规格" width="130" prop="materialSpecs"></el-table-column>
                            <el-table-column label="物料类别" width="130" prop="materialTypeName"></el-table-column>
                            <el-table-column label="单位" width="100" prop="unitName"></el-table-column>
                            <el-table-column label="还货单价" width="120" prop="price"></el-table-column>
                            <el-table-column label="还货数量" width="120" prop="qty"></el-table-column>
                            <el-table-column label="还货金额" width="120" prop="totalAmount"></el-table-column>
                            <el-table-column label="备注" width="160" prop="remarks"></el-table-column>
                        </el-table>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </full-screen-dialog>
    <!-- 预览组件 -->
    <el-image-viewer
        v-if="showImage"
        @close="closeViewer"
        :hide-on-click-modal="true"
        :url-list="srcList"
    />
</template>



<script>
import tool from "@/utils/tool";
export default {
    emits: ["success", "closed"],
    data() {
        return {
            active: 2,
            stepList: ["已下单", "处理中", "已完成"],
            orgType: 3,
            mode: "Add",
            titleMap: {
                Add: "新增",
                Edit: "编辑",
                Show: "查看",
            },
            entityObj: {},
            //预览图片
            previewUrl: [],
            //预览图片列表
            srcList: [],
            showImage: false,
        };
    },
    computed: {
    },
    methods: {
        //显示=
        open(mode = "Add") {
            this.mode = mode;
            this.visible = true;
            return this;
        },
        //图片预览
        handlePreview(row) {
            console.log("row", row.materialImages);
            if (!row.materialImages || row.materialImages.length == 0) {
                return;
            }
            this.previewUrl = row.materialImages[0]; // 设置当前预览的图片 URL
            this.srcList = row.materialImages; // 设置预览列表
            this.showImage = true; // 显示 el-image
        },
        closeViewer() {
            this.showImage = false;
        },
        //表单注入数据
        async setData(data) {
            this.entityObj = {...data};

            this.stepList = ["已下单", "处理中", "已完成"];
            switch (this.entityObj.status) {
                case 9:
                    this.active = 3;
                    break;
                default:
                    this.active = 2;
                    break;
            }
        },
        async initOptions() {},
    },
    async mounted() {
        this.orgType = tool.data.get("USER_INFO").AccountType;
    },
};
</script>

<style scoped>
.el-form-item {
    margin-bottom: 5px !important;
}
</style>
